import "./index.scss";

export type RowProps = {
  children?: React.ReactNode;
  gap?: React.CSSProperties["gap"];
  justify?: React.CSSProperties["justifyContent"];
  align?: React.CSSProperties["alignItems"];
} & React.DetailedHTMLProps<
  React.HTMLAttributes<HTMLDivElement>,
  HTMLDivElement
>;

const Row: React.FC<RowProps> = ({ className, style, ...props }) => {
  return (
    <div
      className={`row ${className}`}
      style={{
        gap: props.gap,
        justifyContent: props.justify,
        alignItems: props.align,
        ...style,
      }}
      {...props}
    >
      {props.children}
    </div>
  );
};

export default Row;
